<template>
	<view class="head" v-if="is_login" @click="change">
		<view class="avatar">
			<image :src="info.avatar" class="image" v-if="info.avatar"></image>
			<uni-icons type="contact-filled" size="70" color="#fff" v-else></uni-icons>
		</view>
		<view class="info">
			<view class="name">
				{{info.name || "微信用户"}}
			</view>
			<view class="tag">
				{{info.grade == 1 ? '您每日可免费查5次，不限次数请升级会员。':(welcome || "欢迎使用")}}
			</view>
			<view class="seting" @click.stop="$rui.route('/pages/user/seting/seting')" v-if="more">
				<uni-icons type="gear" size="20" color="rgba(255,255,255,.5)"></uni-icons>
			</view>
		</view>
	</view>
	<view class="head" v-else @click="onLogin">
		<view class="avatar">
			<uni-icons type="contact-filled" size="70" color="#fff"></uni-icons>
		</view>
		<view class="info">
			<view class="name">
				注册/登录
			</view>
			<view class="tag">
				登录够可以解锁更多功能
			</view>
		</view>
	</view>
	<!-- <rui-user-login ref="loginRef" @change="setInfo"></rui-user-login> -->
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue"
	import user from "@/common/user";

	defineProps({
		more: {
			type: Boolean,
			default: false
		}
	})
	
	
	const emits = defineEmits(['change', 'info'])
	// let loginRef = ref();
	let is_login = ref(true)
	let info = ref({})
	let welcome = ref("")
	let limited = ref(5)
	onMounted(() => {
		info.value = checkLogin()
		emits('info', info.value)

	})


	const checkLogin = () => {
		uni.getStorage({
			key: "BaseData",
			success: res => {
				welcome.value = res.data.welcome;
				limited.value = res.data.limited;
			}
		})
		is_login.value = user.check();
		return user.getUser();
	}

	const onLogin = () => {
		uni.$rui.route('/pages/user/login/login')
	}

	// const setInfo = (e) => {
	// 	info.value = e;
	// 	is_login.value = true;
	// 	emits('info', e)
	// }

	const change = () => {
		emits('change')
	}

	const initData = () => {
		info.value = checkLogin()
	}

	defineExpose({
		initData
	})
</script>

<style lang="scss" scoped>
	.head {
		display: flex;
		align-items: center;
		position: relative;
		padding: 30rpx 0;

		.seting {
			position: absolute;
			top: 50%;
			right: 0;
			transform: translate(0, -50%);
			width: 80rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
		}

		.avatar {
			margin-right: 5rpx;
			width: 140rpx;
			height: 140rpx;
			text-align: center;

			.image {
				width: 105rpx;
				height: 105rpx;
				border-radius: 50%;
				margin-top: 17rpx;
			}
		}

		.info {
			line-height: 38rpx;

			.name {
				font-size: 36rpx;
				font-weight: bold;
				color: #fff;
			}

			.tag {
				font-size: 22rpx;
				color: rgba(255, 255, 255, .5);
				// background: #eee;
				// padding: 2rpx 15rpx;
				// border-radius: 20rpx;
				display: inline-flex;
			}
		}
	}
</style>